#@laybase() 
#define main()
<style>
.col-md-12 {
	position: relative;
	min-height: 100px;
}

.control {
	width: 70%;
    position: absolute;
    top: 10px;
    left: 15px;
}

#datatable .form-group .upload {
	display: none;
}

#datatable ul {
	overflow: hidden;
}

#datatable ul li {
	width: 45px;
	height: 45px;
	float: left;
	margin: 0 5px 5px 0;
	cursor: pointer;
}

#datatable ul li img {
	width: 100%;
	height: 100%;
}

#showimg ul li button.del{
	position: absolute;
    bottom: 5px;
    left: 50%;
    width: 94px;
    margin-left: -47px;
    z-index: 5;
}

.css3loadingbox .line-spin-fade-loader > div {
	background-color: #fff;
}

#app .optsbox {
	display: inline-block;
	width: 30%;
}

#app .optsbox span {
    height: 34px;
    padding: 7px 24px;
    font-size: 14px;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    display: inline-block;
    cursor: pointer;
}

#app .optsbox span.active {
	border-color: #66afe9;;
	color: #66afe9;
}

#app .optsbox a:hover {
	text-decoration: none;
}

</style>
<div class="col-md-12" id="app">
	<div class="control">
		#@searchTab("state",["未放款","已放款"],["未放款","已放款"])
		#@searchTab("opt",["苏宁","明云"],["苏宁","明云"])
<!-- 		<select class="form-control" id="exporttype" style="display: inline-block;width: 20%;"> -->
<!-- 			<option value="">导出当前页</option> -->
<!-- 			<option value="selected">导出选中项</option> -->
<!-- 			<option value="all">导出全部</option> -->
<!-- 		</select> -->
	</div>
	<table class="datatable" id="datatable" data-unique-id="id"></table>
</div>

<script>
	$(function(){
		var $table = $('#datatable')
			
		axios.post("/admin/financeInfo")
		.then(function(res){
			console.log(res.data)
			var data = res.data,
				titles = [{checkbox:true}]
			for(var i = 0;i < data.fields.length;i++){
				var json = {}
				json.field = data.fields[i]
				json.title = data.names[i]
				titles.push(json)
			}
			
			titles.push({
				field: "operation",
				title: "操作"
			})
			
			for(var i = 0;i < data.data.length;i++){
				data.data[i].id = i
				if(data.data[i].state === "未放款"){
					
					data.data[i].operation = "<button type='button' data-orderid='"+ data.data[i].orderId +"' class='btn btn-primary tongguo' data-loading-text='请稍后...'>通过</button>"
				}else if(data.data[i].state === "已放款"){
					data.data[i].operation = "<button type='button' data-orderid='"+ data.data[i].orderId +"' class='btn btn-primary disabled'>已放款</button>"
				}else{
					data.data[i].operation = "<button type='button' data-orderid='"+ data.data[i].orderId +"' class='btn btn-primary tongguo' data-loading-text='请稍后...'>通过</button>"
				}
				
				var dkzmArr = data.data[i].dkzm
				if(dkzmArr.length === 0){
					data.data[i].dkzm = "<div class='form-group' style='margin-bottom: 0;'><input type='file' multiple class='upload' data-orderid='"+ data.data[i].orderId +"' accept='image/jpg,image/jpeg,image/png,image/gif' /><button type='button' class='btn btn-default up-hook' data-loading-text='正在上传...'>上传</button></div>";
				}else{
					var _src = ""
					for(var j = 0;j < dkzmArr.length;j++){
						var pad = "|"
						if(j === dkzmArr.length - 1){
							pad = ""
						}
						_src += dkzmArr[j] + pad
					}
					
					data.data[i].dkzm = "<div class='form-group' style='margin-bottom: 0;'><input type='file' accept='image/jpg,image/jpeg,image/png,image/gif' multiple class='upload' data-orderid='"+ data.data[i].orderId +"' /><button type='button' class='btn btn-default up-hook' data-loading-text='正在上传...'>上传</button><button type='button' class='btn btn-default show-hook' src='"+ _src +"' data-orderid='"+ data.data[i].orderId +"' style='margin-top: 5px;'>预览</button></div>";
				}
				
			}
			
			createTable(titles,data.data)
			
			var searchtabDom = $(".searchtab-wrapper")
			searchtabDom.children("span").on("click",function(){
				var nowData = {}
				searchtabDom.each(function(){
					var input = $(this).children("input"),
						key = input.attr("key"),
						val = input.val()
					nowData[key] = val
				})
				
				if(_x.isEmpty(nowData.state) && _x.isEmpty(nowData.opt)){
					$table.bootstrapTable('load', data.data)
					return
				}
				
				$table.bootstrapTable('load', data.data.filter(function(obj){
					if(_x.isEmpty(nowData.opt)){
						return nowData.state === obj.state
					}else if(_x.isEmpty(nowData.state)){
						return nowData.opt === obj.opt
					}
					return nowData.state === obj.state && nowData.opt === obj.opt
				}))
			})
			
		})
		
		//创建表格
		function createTable(titles,data){
			$table.bootstrapTable({
				uniqueId: 'id',	
				search: true,
				pagination: true, 
	            pageSize: 10,
			    columns: titles,
			    data: data,
			    clickToSelect: true,
			    showExport: true,
				exportTypes: ["excel"],
				exportOptions:{
					ignoreColumn:[0,11,12]
				}
			});		
		}
		
		$table.on("click","input[name='btSelectAll']",function(){
			var data = $table.bootstrapTable('getData'),
				isCheck = $(this).prop("checked")
			for(var i = 0;i < data.length;i++){
				data[i]["0"] = isCheck
			}
		})
		
		$table.on("click","button.up-hook",function(){
			$(this).siblings("input.upload").click()
		})
		
		$table.on("change","input.upload",function(){
			var that = $(this),
				files = that[0].files,
				orderId = that.data("orderid")
			if(_x.isEmpty(that.val())){
				return
			}
			
			if(files.length === 0)return
			
			var $btn = that.siblings("button.up-hook").button('loading'),
				tdDom = that.parents("td"),
				upNum = 0
			for(var i = 0;i < files.length;i++){
				var xhr = new XMLHttpRequest(),
		        	formData = new FormData()
		    	formData.append("dkzm",files[i]);
				xhr.open("post","/admin/uploadEvalPho/" + orderId,true);
				xhr.addEventListener("load",function(){
		            var result = JSON.parse(this.response);
		            console.log("success--->"+result)
		            upNum++
		            if(result.code == 1){
		            	var showBtn = that.siblings("button.show-hook");
			            if(showBtn.length === 0){
			            	tdDom.children("div").append("<button type='button' style='margin-top: 5px;' class='btn btn-default show-hook' src='"+ result.src +"' data-orderid='"+ orderId +"'>预览</button>")
			            }else{
			            	var _src = showBtn.attr("src");
			            	showBtn.attr("src",_src +"|"+ result.src)
			            }
		            }
		            if(i === upNum){
		            	$btn.button('reset')
		            	if(result.code == 1){
		            		_x.show_alert_sh(result.msg,true)
		            	}else{
		            		_x.show_alert_sh(result.msg,false)
		            	}
		            }
		            
		        });
				
				xhr.send(formData);
			}
		})
		
		//图片预览
		var loadingHtml = "<div class='css3loadingbox' style='position: absolute;z-index: -1;top: 50%;left: 50%;margin: -40px 0 0 -40px;'>"+
						  "    <div class='line-spin-fade-loader'>"+
						  "        <div></div>"+
						  "        <div></div>"+
						  "        <div></div>"+
						  "	       <div></div>"+
					 	  "	       <div></div>"+
						  "	       <div></div>"+
						  "	       <div></div>"+
						  "	       <div></div>"+
						  "    </div>"+
						  "</div>",
		    showimg = $("#showimg"),//背景层
			imgbox = showimg.children(".imgbox"),//可视区域
			imgboxW = imgbox.width(),
			imgboxH = imgbox.height(),
			imgul = imgbox.children("ul.imgul"),//图片容器
			confirm = $("#alert_confirm"),
			delbBtnDom = null;//缓存删除按钮
		showimg.find(".css3loadingbox").remove()
		showimg.removeAttr("style").hide().find("ul.btn").hide()
		showimg.find("ul.btn").show();
		function getImg(opt){
			var src = opt.src,
				mark = opt.mark,
				liDom = $("<li></li>"),
				image = new Image();
			image.src = src
			liDom.html(loadingHtml)
			
			image.onload = function(){
				liDom.html("")
				liDom.css({
					width: liDom.parent().width(),
					height: liDom.parent().height()
				})
				liDom.iviewer({
                     src: src
                });
				liDom.append("<button class='btn btn-danger del'>删除</button>")
				if(mark){
					liDom.addClass("active").siblings("li").removeClass("active")
				}
			}
			imgul.append(liDom);
		}
			
		$table.on("click","button.show-hook",function(){
			var that = $(this),
				ulDom = that.parent(),
				orderId = that.data("orderid"),
				_src = that.attr("src").split("|")
			
			imgul.html("")
			
			for(var i = 0;i < _src.length;i++){
				var opt = {}
				opt.src = _src[i]
				opt.mark = false
				if(i === 0){
					opt.mark = true
				}
				getImg(opt)
			}
				
			showimg.fadeIn(300);
			$('html').css("overflow","hidden")
			showimg.data("orderid",orderId)
		})
		
		//关闭图片展示
		showimg.on("click",function(e){
			$(this).fadeOut(300);
			$('html').removeAttr("style")
		})
		
		imgbox.on("click","img",function(e){
			e.stopPropagation();
		})
		
		imgbox.on("click",function(e){
			e.stopPropagation();
		})
		
		//左右切换
		imgbox.children("ul.btn").children("li").on("click",function(e){
			e.stopPropagation();
			var lis = imgbox.children("ul.imgul").children("li"),
				acIndex = -1
			if(lis.length <= 1)return;			
			//找到active索引
			imgul.children("li").each(function(){
				if($(this).hasClass("active")){
					acIndex = $(this).index();
					return false;
				}
			})
			if($(this).index()){//右边
				acIndex++;
				if(acIndex > imgul.children("li").length - 1){
					acIndex = 0;
				}
			}else{
				acIndex--;
				if(acIndex < 0){
					acIndex = imgul.children("li").length - 1;
				}
			}
			var nowLi = imgul.children("li").eq(acIndex)
				
			nowLi.addClass("active").siblings("li").removeClass("active");
		})
		
		showimg.on("click","div.iviewer_common",function(e){
			e.stopPropagation()
		})
		
		//导出选择
		/*$("#exporttype").change(function(){
			var that = $(this)
			$table.bootstrapTable('destroy').bootstrapTable({
                exportDataType: that.val()
            });
		})*/
		
		//通过
		$table.on("click","button.tongguo",function(){
			var that = $(this),
				orderId = that.data("orderid")
			that.button('loading')
			axios.get("/admin/checkPhoFinal/10-"+orderId)
			.then(function(res){
				console.log(res.data)
				if(res.data.code == 1){
					_x.show_alert_sh(res.data.msg,true)
					that.addClass("disabled").attr("disabled",true).html("已通过")
				}else{
					_x.show_alert_sh(res.data.msg,false)
					that.button('reset')
				}
			})
			.catch(function(){
				_x.show_alert_sh("提交失败！",false)
				that.button('reset')
			})
		})
		
		//删除
		imgul.on("click","button.del",function(e){
			e.stopPropagation()
			var that = $(this),
				src = that.siblings("img").attr("src"),
				option = {
				isShowBg: false,
				text: "您真的要删除吗？",
				fn: function(modalDom,btn,callback){
					var $src = src
					if($src.lastIndexOf("?") > -1){
						$src = $src.substring(0,$src.lastIndexOf("?"))
					}
					axios.get("/admin/deleteEvalPho",{
						params: {
							orderId: showimg.data("orderid"),
							src: decodeURI($src)
						}
					})
					.then(function(res){
						if(res.data.code == 1){
							$table.find("img[src='"+ src +"']").parent().remove()
							var nextIndex = imgul.children("li.active").next().index()
							imgul.children("li.active").remove()
							if(nextIndex === -1){
								imgul.children("li").eq(0).addClass("active")
							}else{
								imgul.children("li").eq(nextIndex - 1).addClass("active")
							}
							_x.show_alert_sh("删除成功！",true)
							callback()
						}else{
							_x.show_alert_sh(res.data.msg,false)
							btn.button('reset')
						}
					})
					.catch(function(){
						_x.show_alert_sh("删除失败！",false)
						btn.button('reset')
					})
				}
			}
			_x.show_alert_confirm(option)
		})
		
	})
</script>
#end